<template>
  <div class="treatment-process">
    <div v-loading="loading" class="box-echart">
      <div class="prehospital-summary_content">
        <el-card class="box-card2">
          <div slot="header" class="clearfix">
            <span>脑梗死静脉溶栓及血管内治疗</span>
          </div>
          <el-card v-for="(item, index) in chartData.slice(0, 14)" :key="index" class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ index + 1 }}、{{ item.name }}</span>
            </div>
            <qualityStrokeChart
              :chart-data="item.optionData"
              :index="item.index"
              :single-chart-data="singleChartData"
              @clickIcon="clickIcon"
              @clickZuo="clickZuo"
              @clickYou="clickYou"
            />
          </el-card>
        </el-card>
        <el-card class="box-card2">
          <div slot="header" class="clearfix">
            <span>脑出血围手术期</span>
          </div>
          <el-card v-for="(item, index) in chartData.slice(14, 18)" :key="index" class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ item.index + 1 }}、{{ item.name }}</span>
            </div>
            <qualityStrokeChart
              :chart-data="item.optionData"
              :index="item.index"
              :single-chart-data="singleChartData"
              @clickIcon="clickIcon"
              @clickZuo="clickZuo"
              @clickYou="clickYou"
            />
          </el-card>
        </el-card>
        <el-card class="box-card2">
          <div slot="header" class="clearfix">
            <span>蛛网膜下腔出血及颅内动脉瘤围手术期</span>
          </div>
          <el-card v-for="(item, index) in chartData.slice(18, 26)" :key="index" class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ item.index + 1 }}、{{ item.name }}</span>
            </div>
            <qualityStrokeChart
              :chart-data="item.optionData"
              :index="item.index"
              :single-chart-data="singleChartData"
              @clickIcon="clickIcon"
              @clickZuo="clickZuo"
              @clickYou="clickYou"
            />
          </el-card>
        </el-card>
        <el-card class="box-card2">
          <div slot="header" class="clearfix">
            <span>CEA和CAS围手术期</span>
          </div>
          <el-card v-for="(item, index) in chartData.slice(26, 30)" :key="index" class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ item.index + 1 }}、{{ item.name }}</span>
            </div>
            <qualityStrokeChart
              :chart-data="item.optionData"
              :index="item.index"
              :single-chart-data="singleChartData"
              @clickIcon="clickIcon"
              @clickZuo="clickZuo"
              @clickYou="clickYou"
            />
          </el-card>
        </el-card>
      </div>
    </div>

  </div>
</template>

<script>
import qualityStrokeChart from '../qualityStrokeChart'
import { getStatisticQuota } from '@/api/statistical/statisticStroke'
export default {
  name: 'ChestPainQuality',
  components: {
    qualityStrokeChart
  },
  props: ['preYear', 'preQuarter', 'preMonth', 'preMonthRange', 'preIndicators'],
  data() {
    return {
      loading: false,
      indicatorsPlaceholder: '筛选指标',
      timeValue: 'quarter',
      indicators: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32],
      defaultKeys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32],
      timeRange: [],
      timeList: [{
        label: '季度',
        value: 'quarter'
      }, {
        label: '月度',
        value: 'month'
      }, {
        label: '年度',
        value: 'year'
      }],
      data: [{
        id: 1, label: '脑梗死静脉溶栓率'
      }, {
        id: 2, label: 'DNT中位数'
      }, {
        id: 3, label: 'DNT≤60分钟达标率'
      }, {
        id: 4, label: 'DPT中位数'
      }, {
        id: 5, label: 'DPT≤90分钟达标率'
      }, {
        id: 6, label: 'ONT中位数'
      }, {
        id: 7, label: 'OPT中位数'
      }, {
        id: 8, label: '脑梗死抗血小板治疗比率'
      }, {
        id: 9, label: '脑梗死吞咽困难筛查率'
      }, {
        id: 10, label: '脑梗死康复治疗率'
      }, {
        id: 11, label: '静脉溶栓及血管内治疗患者住院死亡率'
      }, {
        id: 12, label: '静脉溶栓并发症发生率'
      }, {
        id: 13, label: '血管内治疗再通率'
      }, {
        id: 14, label: '血管内治疗并发症发生率'
      }, {
        id: 15, label: '脑出血降压治疗比率'
      }, {
        id: 16, label: '脑出血康复治疗率'
      }, {
        id: 17, label: '脑出血手术患者住院死亡率'
      }, {
        id: 18, label: '脑出血手术并发症发生率'
      }, {
        id: 19, label: '破裂动脉瘤应用尼莫地平预防血管痉挛治疗比率'
      }, {
        id: 20, label: '破裂动脉瘤手术康复治疗率'
      }, {
        id: 21, label: '所有动脉瘤手术并发症发生率'
      }, {
        id: 22, label: '动脉瘤介入栓塞术并发症发生率'
      }, {
        id: 23, label: '动脉瘤开颅夹闭术并发症发生率'
      }, {
        id: 24, label: '所有动脉瘤手术患者住院死亡率'
      }, {
        id: 25, label: '动脉瘤介入栓塞术患者住院死亡率'
      }, {
        id: 26, label: '动脉瘤开颅夹闭术患者住院死亡率'
      }, {
        id: 27, label: 'CEA手术并发症发生率'
      }, {
        id: 28, label: 'CAS手术并发症发生率'
      }, {
        id: 29, label: 'CEA术后抗血小板治疗比率'
      }, {
        id: 30, label: 'CAS术后抗血小板治疗比率'
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      chartData: [],
      singleChartData: {},
      radioDate: '1',
      year: '',
      quarter: '',
      month: '',
      monthRange: [],
    }
  },
  mounted() {},
  methods: {
    search() {
      this.year = this.preYear
      this.quarter = this.preQuarter
      this.month = this.preMonth
      this.monthRange = this.preMonthRange
      this.indicators = this.preIndicators
      this.$nextTick(() => {
        this.init()
      })
    },
    init() {
      this.loading = true
      this.chartData = []
      getStatisticQuota({
        hospitalId: this.$store.getters.hospitalId,
        indexes: this.indicators.join(','),
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : '',
      }).then(res => {
        if (res.code === 0) {
          if (res.data && res.data.length > 0) {
            res.data.forEach(el => {
              el.index = el.index - 1
              let targetData = []
              let timeData = []
              if (el.quotaData && el.quotaData.length > 0) {
                el.quotaData.forEach(e => {
                  targetData.push(e.value ? e.value : 0)
                  timeData.push(e.timeName ? e.timeName : '')
                })
              }
              el.optionData = {
                timeData: timeData,
                targetData: targetData,
                unit: el.unit
              }
              if (el.name === "动脉瘤介入栓塞术患者住院死亡率") {
                el.index = 24
              }
              this.chartData.push(el)
            })
          }
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    changeTime() {
      this.init()
    },
    clickIcon(index) {
      this.singleChartData = this.chartData[index]
    },
    clickZuo(index) {
      if (index === 0) {
        this.singleChartData = this.chartData[this.chartData.length - 1]
      } else {
        this.singleChartData= this.chartData[index - 1]
      }
    },
    clickYou(index) {
      if (index > this.chartData.length - 1 || index === this.chartData.length - 1) {
        this.singleChartData = this.chartData[0]
      } else {
        this.singleChartData = this.chartData[index + 1]
      }
    },

    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.indicators.push(data.id)
      } else {
        this.indicators.splice(this.indicators.indexOf(data.id), 1)
      }
      this.init()
    },

  }
}
</script>

<style lang="less" scoped>
.treatment-process {
  width: 100%;
  height: 100%;

  .box-chose {
    height: 80px;
    padding-left: 30px;
    padding-top: 20px;
  }

  .box-card2+.box-card2 {
    margin-top: 5px;
  }

  .box-echart {
    height: ~'calc(100% - 80px)';
    overflow: auto;
    background: #f0f2f5;
    padding: 20px 20px 0 20px;

    .box-card {
      width: 32%;
      height: 506px;
      display: inline-block;
      margin: 0 10px;

      /deep/.el-card__body {
        height: ~'calc(100% - 55px)';
      }
    }
  }

  &_content {
    height: calc(100% - 59px);
    overflow-y: auto;
  }

  .dignosis-content {
    width: 100%;
    height: 400px;
    display: inline-block;

    .dignosis-style {
      display: inline-block;
      width: 50%;
      height: 100%;
    }
  }

  .treatment-process-card {
    height: 400px;
  }



  /deep/.el-radio__label {
    line-height: 38px;
  }
}
</style>


